---
layout: pages
options: full
class: fill-light
title: Mapbox GL JS Roadmap
---

<link href='{{site.baseurl}}/site.css' rel='stylesheet' />

<style>
  .roadmap-block {
    margin: 10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
  }
  code a {
    color: #fbb03b;
  }
  .roadmap-project {
    color: #8a8acb;
  }
</style>

<div class='pad2y col12'>
  <div class='pad1 contain space-bottom2'>
    <h1 class='space-bottom2'>
      Mapbox GL JS Roadmap
    </h1>
    <p class='prose'>The GL JS team is focused on making our priorities transparent and reliable. Below is a list of which major projects and features are currently in active development, upcoming, or we are thinking about long-term. Each item includes links to the relevant issues and pull requests on GitHub.</p>
    <p class='prose'>This roadmap is updated weekly on Tuesdays. The roadmap does not include bug fixes, and features that take less than a day to develop. Due to the pace at which GL JS is being developed, we are unable to confidently estimate which release version a feature will ship with.</p>
  </div>

  <div class='col12'>

    {% for r in site.data.roadmap %}
    <!-- {{r.term}} -->
    <div class='col6'>
      <div class='roadmap-block fill-white prose keyline-all'>
        <div class='pad2'>
          <h2 style="margin-bottom: 0">{{r.term}}</h2>
          <small class="quiet">{{r.description}}</small>
        </div>
        {% for item in r.items %}
        <div class='pad2x pad1y keyline-top'>
          {% if item.project %}<span class="icon point roadmap-project fr"></span>{% endif %}
          {{item.name}}
          <div class="space-top">
            {% if item.issues %}{% for i in item.issues %}
            <code><a target="_blank" class="roadmap-issue" href="https://github.com/mapbox/mapbox-gl-js/issues/{{i}}">#{{i}}</a></code>
            {% endfor %}{% endif %}
            {% if item.project %}
            <code><a target="_blank" href="https://github.com/mapbox/mapbox-gl-js/projects/{{item.project}}">project#{{item.project}}</a></code>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}

  </div>
</div>

<script src='{{site.baseurl}}/src/site.js'></script>
